<template>
    <div>
        <ul class="recomList" >
            <router-link :to="`/ProductDetailsView?commodity_id=${item.action.path}`" tag="li" class="recom" v-for="(item,index) in recomdata" :key="index">
                <div>
                    <div class="recomImgBox">
                        <img :src="`http:${item.image_url}`">
                    </div>
                    <h3 class=" one-txt-cut">{{ item.name }}</h3>
                    <span class="one-txt-cut" v-html="item.product_desc"></span>
                    <p class="price">
                        <i>￥</i>
                        {{ item.price }}
                        <!-- <span >￥{{  }}</span> -->
                    </p>
                </div>
            </router-link>
        </ul>
    </div>
</template>
<script>
export default {
    props:['recomdata'],
    data() {
        return {
            
        }
    },

}
</script>
<style lang="scss">
.recomList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 5px;

    .recom {
        width: 49%;
        background-color: #fff;
        padding: 25px 0;
        margin-bottom: 5px;
        box-sizing: border-box;
        height: 285px;

        >div {
            display: flex;
            align-items: center;
            flex-direction: column;
            height: 242px;

            .recomImgBox {
                width: 156px;
                height: 156px;
            }

            h3 {
                font-size: 14px;
                height: 20px;
                flex-shrink: 0;
                max-width: 80%;
            }

            span {
                padding: 17px 0 19px 0;
                color: #999999;
                max-width: 100%;
                box-sizing: border-box;
                font-size: 12px;
                display: block;
                max-width: 90%;
            }

        }

    }
}
</style>